<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Text</title>
    <script src="lib/rollup.browser.js"></script>
    <script src="lib/requireES.js"></script>
    <script src="lib/config.js"></script>
</head>
<body style="margin:0">

    <div style="margin: 20px;"></div>
    <div id="main" style="width:1200px;height:2200px;margin:0;"></div>

    <script type="text/javascript">

    var showBoundingRect;

    requireES([
        'quark-renderer/src/quark-renderer',
        'quark-renderer/src/graphic/Text',
        'quark-renderer/src/graphic/shape/Line',
        'quark-renderer/src/graphic/shape/Rect'
    ], function(QuarkRenderer, Text, Line, Rect){

        var qr = QuarkRenderer.init(document.getElementById('main'));

        qr.add(new Text({
            style: {
                x: 50,
                y: 20,
                textBackgroundColor: '#876543',
                textPadding: 5,
                text: 'Has textBackgroundColor',
                textFill: '#fff'
            }
        }));

        qr.add(new Text({
            style: {
                x: 50,
                y: 70,
                textBackgroundColor: '#456789',
                textPadding: 5,
                text: 'Has textBackgroundColor, the same `fill` with previous text, should draw text normally',
                textFill: '#fff'
            }
        }));

    });
    </script>
</body>
</html>